import { Icon, Button, Grid, Flex, WingBlank, Card, Row, Col, List, WhiteSpace } from 'antd-mobile';
import React, { PureComponent } from 'react';
import { AppRegistry, View, StyleSheet, Image, Text } from 'react-native';
import { Urls } from '../utils/Urls';

export class IndexScreenCard extends PureComponent {
  state = {
    station: '...',
    equipment: '...',
    monitor: '...',
    push: '...',
  }
  componentDidMount() {
    let url = Urls.BASE_URL + "getCollectForClient";
    console.log("首页统计：", url);
    
    fetch(url)
      .then((response) => {
        console.log("首页统计：", response)
        var responsejson = JSON.parse(response._bodyInit);
        this.setState({
          station: responsejson.content.station,
          equipment: responsejson.content.equipment,
          push: responsejson.content.push,
          monitor: responsejson.content.monitor
        })
      })
      .catch((error) => {
        console.log(error);
      })
  }
  render() {
    return (
      <WingBlank size="sm">
        <Flex style={styles.flexWhite}>

          <View style={styles.CardStyle}>
            <Flex style={styles.flexWhite}>
              <Image source={require('../assets/Images/index/station.png')}
                style={styles.imagestyle}
              />
              <Flex.Item>
                <Text style={styles.textStyle}>分站总量</Text>
                <Text style={styles.ziliao}>{this.state.station}</Text>
              </Flex.Item>
            </Flex>
          </View>
          <View style={[styles.CardStyle, styles.cardLeft]}>
            <Flex style={styles.flexWhite}>
              <Image source={require('../assets/Images/index/tantou.png')}
                style={styles.imagestyle}
              />
              <Flex.Item>
                <Text style={styles.textStyle}>测温设备总量</Text>
                <Text style={styles.ziliao}>{this.state.equipment}</Text>
              </Flex.Item>
            </Flex>
          </View>
        </Flex>
        <WhiteSpace />
        <Flex style={styles.flexWhite}>
          <View style={styles.CardStyle}>
            <Flex style={styles.flexWhite}>
              <Image source={require('../assets/Images/index/alarm.png')}
                style={styles.imagestyle}
              />
              <Flex.Item>
                <Text style={styles.textStyle}>今日最高温度</Text>
                <Text style={styles.ziliao}>{this.state.monitor}℃</Text>
              </Flex.Item>
            </Flex>
          </View>
          <View style={[styles.CardStyle, styles.cardLeft]}>
            <Flex style={styles.flexWhite}>
              <Image source={require('../assets/Images/index/maxTemper.png')}
                style={styles.imagestyle}
              />
              <Flex.Item>
                <Text style={styles.textStyle}>今日报警次数</Text>
                <Text style={styles.ziliao}>{this.state.push}</Text>
              </Flex.Item>
            </Flex>
          </View>
        </Flex>
      </WingBlank>
    );
  }
}

const styles = StyleSheet.create({
  CardStyle: {
    flex: 1,
    height: 100,
  },
  cardLeft: {
    paddingLeft: 15,
    marginLeft: 15
  },
  flexWhite: {
    backgroundColor: '#ffffff',
  },
  imagestyle: {
    width: 39,
    height: 39,
    marginTop: 10,
    marginLeft: 15,
  },

  textStyle: {
    fontSize: 13,
    textAlign: 'center',
    marginBottom: 3,
    marginLeft: 10,
    marginTop: 25
  },
  ziliao: {
    fontSize: 26,
    textAlign: 'center',
    marginLeft: 10,
    marginBottom: 15
  }
});